<template>
	<view class="container">
		<view class="subsite-banner-top">
			<image src="https://www.fzftjc.com/static/rs/itorder/applet/img/s_01.png" mode="widthFix">
		</view>
		<!-- yuyue -->
		<view class="subsite subsite-with-banner">
			<view class="subsite-heading">
				<view class="section-main-title fz18"><text>//</text>预约下单<text>//</text></view>
				<view class="c-gray mt10">请认真填写以下信息，预约后我们将及时联系您！</view>
			</view>
			<view class="flex-center mt20"><view class="current c-info" @click="open">查看预约记录</view></view>
			<view class="subsite-row">
				
				<form class="">
				<view class="form-group">
					<label class="field-label">预约服务项目：</label>
					<view class="field-control">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="weui-select">{{array[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="flex-sb">
					<view class="form-group col-6">
						<label class="field-label">客户姓名：</label>
						<view class="field-control">
							<input class="weui-input" v-model='form.name'  placeholder="请输入您的姓名" /></view>
					</view>
					<view class="form-group col-6">
						<label class="field-label">手机号：</label>
						<view class="field-control">
							<button v-if="is_phone==2" style="margin: auto;">{{form.phone}}</button>
							<button v-if="is_phone==1" @getphonenumber="decryptPhoneNumber" style="margin: auto;" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">点击获取手机号</button>

							<!-- <input v-model='form.phone' class="weui-input"   placeholder="请输入联系手机号" /> -->
						</view>
					</view>
				</view>
				<view class="form-group">
					<label class="field-label">联系地址：<text class="fz12 c-gray9 fn">(当前仅开通福州市服务)</text></label>
					<view class="field-control">
						<picker @change='zonePrice' mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
							<view class="weui-select">{{multiArray[1][multiIndex[1]]}}</view>
						</picker>
						
					</view>
					<view class="field-control uni-flex">
						<input v-model='form.address' class="weui-input uni-flex-item" placeholder="请填写详细联系地址" />
						<navigator :url="'./mapclick?x='+x+'&y='+y" hover-class="none" class="mapclick">
							
							<uni-icons type="map" v-if="addSitesBool==false" color="#F44439"  size="14"></uni-icons><text v-if="addSitesBool==false" class="c-red ml10">未选</text>
							<uni-icons type="map"  v-if="addSitesBool" color="#00b700"  size="14"></uni-icons><text v-if="addSitesBool" class="c-green ml10">已选</text>
							</navigator>
					</view>
				</view>
				<view class="form-group">
					<label class="field-label">上门时间：</label>
					<view class="field-control">
						<view class="flex-sb">
							<view class="col-6">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="weui-select">{{date}}</view>
						</picker>
						</view>
						<view class="col-6">
						<picker :range="timeArr" :value="time"  @change="bindTimeChange">
							<view class="weui-select">{{timeArr[time]}}</view>
						</picker>
						</view>
						</view>
					</view>
				</view>
				<view class="form-group">
					<label class="field-label">需求描述：</label>
					<view class="field-control">
						<textarea v-model='form.remark' placeholder="请详细描述您的需求" class="weui-input"></textarea>
					</view>
				</view>
				<view class="form-group">
					<view class="outline-box flex-center">
					<label class="field-label">预付金额：</label>
					<view class="price-value">&yen;{{form.price}}</view>
					</view>
				</view>
				
				<view class="form-group mt50">
				  <button type="primary" @click="submit" class="butt-radio" >确认预约</button>
				</view>
				<view class="flex-center" @click="checked=checked?false:true;">
					<label class="c-gray fz12">
					<checkbox checked="true" color="#f45905" class="checkbox_circle" />我已阅读，并同意接受</label><view class="fz12 c-info" @tap="modalTap">《预约服务协议》</view>
				</view>
				</form>
			</view>
		</view>
		<!-- yuyue end-->
		<workflow></workflow>
		<!-- Service -->
		<view class="subsite subsite-with-banner">
			<view class="subsite-heading">
				<view class="section-main-title fz18"><text>//</text>服务项目说明<text>//</text></view>
			</view>
			<!-- 预约查询 -->
			<view>
			  <view class="mt30">
			  	<view class="field-control uni-flex">
			  		<view class="uni-flex-item"><input v-model="search" class="weui-input"  placeholder="请输入手机号码/预约单号" /></view>
					<button type="primary" @click="query" class="sou-but">预约查询</button>
					</view>
			  </view>
			</view>	
			<!-- 预约查询 end-->
			<view class="mt20">
				<view class="flex-wrap">
					<view class="pro-card" v-for="(value,key) in data">
						<view class="pro-card-img">
							<image :src="value.thumb" mode="widthFix"></image>
						</view>
						<view class="uni-flex-item pro-card-desc">
							<view class="fz16 line">{{value.name}}</view>
							<view class="c-gray fz12 mt20">{{value.brief}}</view>
						<view class="price-item"><text class="price-value">&yen;{{value.price}}</text>起</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- Service end-->
		<!-- Footer -->
		<relation></relation>
		<!-- Footer end-->
		
		<!-- 预约记录pop -->
		    <uni-popup ref="popup2" type="center" @change="change">
			    <view class="pop-cont">
					<view class="pop-close" @click="close"><uni-icons type="closeempty" size="24" color="#a4a4a4"></uni-icons></view>
					<view class="subsite-heading">
						<view class="section-main-title fz18"><text>//</text>预约记录<text>//</text></view>
					</view>
					<view class="chart-box mt30">
						<!-- 缺省值 -->
						<view class="flex-column flex-center" v-if="recordData==false">
							<image src="../../static/noRecord.png" class="nodata-img" mode="widthFix"></image>
							<view class="nodata-txt">暂无预约记录</view>
						</view>
						<!-- 缺省值 end-->
						<view class="order-box-detai scroll-view" v-if="recordData">
							<navigator :url="'order?order_id='+value.order_sn" class="order-item" v-for="(value,key) in recordData">
								<view class="uni-flex">
								<view class="uni-flex-item"><uni-icons type="checkbox" size="14" color="#a4a4a4" class="mr10"></uni-icons>创建时间：<text>{{formatTime(value.add_time,3)}}</text></view>
								<view class="tr"><text class="c-red">&yen;{{  parseFloat(value.final_price)?value.final_price:(parseFloat(value.region_price)?value.region_price:value.price)}}</text></view>
								</view>
							</navigator>
						</view>
					</view>	
			    </view>
		    </uni-popup>   
		<!-- 预约记录pop end-->
		
		<!-- 获取授权弹窗 -->
		<uni-popup ref="popup" type="bottom" :safe-area="false">
		<view class="authorize-box">
			<view><uni-icons type="info-filled" color="#f45905" size="14" class="mr10"></uni-icons><text>使用本服务需授权获取:</text></view>
			<view class="fz18"><text class="bold">你的账号信息（昵称、头像等）</text></view>
			<view class="bt mt10">
			 <view class="p20">
				 <button type="primary" class="butt-radio"@click="userInfo" >同意授权</button>
			 </view>
			</view>
		</view>
		</uni-popup>
		<!-- 获取授权弹窗 end-->
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year;
		} else if (type === 'end') {
			year = year + 1;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		
		return `${year}-${month}-${day}`;
	}
	import relation from'../public/relation.vue';
	import workflow from '../public/workflow.vue';
	import base from '../../js/base.js';
	import app from '../../js/app.js';
	import md5 from '../../js/md5.js';
	import base64 from '../../js/base64.js';
	export default {
		components:{
			relation,workflow
		},
		onShow:function(e){
		    let pages = getCurrentPages();
		    let currPage = pages[pages.length-1];
			console.log(currPage.data);
			if(currPage.data.addSitesBool)
			{
				if(currPage.data.addSites)
				{
					this.form.address = currPage.data.addSites;
				}
				this.addSitesBool = currPage.data.addSitesBool;
				this.x= currPage.data.x;
				this.y= currPage.data.y;
			}
		},
		data() {
			return {
				array: ['家装防水服务', '建筑工程防水服务'],
				index: 0,
				multiArray: [
					['市区/其他'],
					['鼓楼区', '台江区', '晋安区', '仓山区', '马尾区']
				],
				multiIndex: [0, 0, 0],
				date: getDate({format: true}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				time: 0,
				phone: '114',
				modalHidden: true,
				data:[],
				sites:[],
				form:{
					service_id:0,
					district:0,
					address:'',
					name:'',
					phone:'',
					appointment_time:'',
					remark:'',
					price:''
				},
				recordData:false,
				search:'',
				addSites:'',
				addSitesBool:false,
				x:'',
				y:'',
				timeArr:[1,2,3,45,6,6,7,8],
				checked:true,
				is_phone:1
			}
		},
		onLoad() {
			let user_data=base.session.get('weixin_min_number');
			this.is_phone = user_data.info.is_phone;
			this.form.phone = user_data.info.mobile;
			//console.log(user_data);
			let This = this;
			let a1= new Date();
			let a2 = new Date();
			this.timeArr =[];
			a1.setHours(8,0,0,0);
			if(a1.getMinutes()>30)
			{
				a1.setHours(a1.getHours()+1,0,0,0);
			}else{
				a1.setMinutes(30,0,0);
			}
			a2.setHours(21,30,0,0);
			for(let i =a1.getTime();i<=a2.getTime();i+=1000*60*30)
			{
				let a3 = new Date;
				a3.setTime(i);
				//console.log(a3.getHours()+':'+(a3.getMinutes()==0?'00':a3.getMinutes()));
				this.timeArr.push(a3.getHours()+':'+(a3.getMinutes()==0?'00':a3.getMinutes()));
			}
			base.request({
				url:base.urltext('/itorder/home_port/service_list'),
				success:function(res){
					if(res.data.success>0)
					{
						This.data = res.data.list;
						let arr =[];
						let site = [];
						for(let i in This.data)
						{
							arr.push(This.data[i].name);
						}
						This.array = arr;
						
						for(let i in res.data.districts)
						{
							site.push(res.data.districts[i]);
							This.sites.push(i);
						}
						This.multiArray[1] = site;
						This.form.price = This.data[0].price;
					}
				}
			});
			
		},
		methods: {
			decryptPhoneNumber(e){
				if(!e.detail.encryptedData)
				{
					uni.showToast({
					    title: '获取手机号失败', icon: 'none', duration: 3000
					});
					return ;
				}
				console.log(e.detail);
				let This = this;
				e.detail.session_key = app.g.session_key;
				e.detail.openid = app.g.user_openid;
				base.request({
					url:base.urltext('/itorder/user_port/get_phone'),
					header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
					data:e.detail,
					success:function(res){
						if(res.data.success>0)
						{
							base.session.set('weixin_min_number',res.data,60*60*5);
							uni.showToast({
							    title: '授权成功', icon: 'success', duration: 3000
							});
							This.form.phone = res.data.info.mobile;
							This.is_phone = res.data.info.is_phone;
						}else{
							uni.showToast({
							    title: '系统错误', icon: 'none', duration: 3000
							});
						}
					}
				})
			},
			userInfo:function(){
				let This =this;
				uni.getUserProfile({
					desc:'作为账号基本信息',
					lang:'zh_CN',
					success(res) {
						let datas=res.userInfo;
						datas.openid=app.g.user_openid;
						datas.update_member = 1;
						//console.log(res);
						base.request({
							url:'https://www.fzftjc.com/com.php?op=weixin_min/member',
							data:datas,
							//header:{ 'content-type': 'application/x-www-form-urlencoded' },
							success:function(res){
								if(res.data.success>0)
								{
									base.session.set('weixin_min_number',res.data,60*60*5);
									uni.showToast({
									    title: '授权成功', icon: 'success', duration: 3000
									});
									This.$refs.popup.close();
								}else{
									uni.showToast({
									    title: '无法获取授权', icon: 'none', duration: 3000
									});
									return ;
								}
							}
						})
					},fail(){
						uni.showToast({
						    title: '无法获取授权', icon: 'none', duration: 3000
						});
					}
				})
			},
			query:function(){
				let This = this;
				if(!This.search)
				{
					uni.showToast({title:'输入查找的内容',icon:'error'});
					return ;
				}
				base.request({
					url:base.urltext('/itorder/user_port/order_get'),
					header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
					data:{
						value:This.search
					},
					success:function(res){
						if(res.data.success>0)
						{
							uni.redirectTo({url:'./order?order_id='+res.data.list.order_sn});
						}else{
							uni.showToast({title:'暂无数据',icon:'error'});
						}
					}
				});
			},
			formatTime:function(e,b=1){
				return base.formatTime(e,b);
			},
			submit(){
				
				let user_data=base.session.get('weixin_min_number');
				if(user_data)
				{
					if(user_data.info.is_auth!=2)
					{
						this.$refs.popup.open();
						return ;
					}
				}
				let This= this;
				this.form.service_id = this.data[this.index].id;
				if(!this.form.district)
				{
					this.form.district = this.sites[0];
				}
				if(!this.form.name)
				{
					uni.showToast({title:'姓名必填',icon:'error'});
					return ;
				}
				if(!base.valid(this.form.phone,'mobile'))
				{
					uni.showToast({title:'手机号格式错误',icon:'error'});
					return ;
				}
				if(!this.form.address)
				{
					uni.showToast({title:'详细地址必填',icon:'error'});
					return ;
				}
				if(!this.form.remark)
				{
					uni.showToast({title:'需求必填',icon:'error'});
					return ;
				}
				//this.form.appointment_time = this.date+' '+this.time;
				this.form.appointment_time = this.date+' '+ this.timeArr[this.time];
				var t=new Date(this.form.appointment_time);
				var tb = new Date();
				if(t.getTime()<tb.getTime()+1000*60*60*2)
				{
					uni.showToast({title:'预约时间错误',icon:'error'});
					return ;
				}
				if(!this.addSitesBool)
				{
					uni.showToast({title:'地图位置必选',icon:'error'});
					return;
				}
				if(!this.checked)
				{
					uni.showToast({title:'请同意服务协议',icon:'error'});
					return ;
				}
				this.form.openid =  app.g.user_openid;
				base.request({
					url:base.urltext('/itorder/user_port/create_order'),
					header:{ 'content-type': 'application/x-www-form-urlencoded','authorization':app.g.session_key},
					data:This.form,
					success:function(res){
						if(res.data.success>0)
						{
							let v_data = res.data.list;
							uni.requestPayment({
								timeStamp: v_data.timeStamp,
								nonceStr: v_data.nonceStr,
								package: v_data.package,
								signType: 'MD5',
								paySign: v_data.paySign,
								success(res) {
									uni.hideLoading();
									uni.showToast({title:'支付成功',icon:'success'});
								},
								fail(res) {
									console.log(res);
									uni.showToast({title:'支付失败',icon:'error'});
								}
							})
							//uni.showToast({title:'预约成功',icon:'success'});
						}else{
							uni.showToast({title:res.data.msg,icon:'error'});
						}
					}
				});
			},
			bindPickerChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value
			},
			zonePrice:function(e){
				let This = this;
				base.request({
					url:base.urltext('/itorder/home_port/service_price'),
					header:{ 'content-type': 'application/x-www-form-urlencoded'},
					data:{
						service_id:This.data[This.index].id,
						district:This.form.district
					},
					success:function(res){
						if(res.data.success>0)
						{
							This.form.price = res.data.price;
						}
					}
				});
			},
			bindMultiPickerColumnChange: function(e) {
				let This = this;
				this.multiIndex[e.detail.column] = e.detail.value	;
				this.form.district = this.sites[e.target.value];
				this.$forceUpdate();
				
				return ;
				//console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0:
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['鼓楼区', '台江区', '晋安区', '仓山区', '马尾区']
								break
							case 1:
								this.multiArray[1] = ['闽侯县', '永泰县', '福清市', '长乐区', '平潭县', '连江县', '罗源县', '闽清县']
								break
						}
						this.multiIndex[1] = 0
						break
				}
				this.$forceUpdate()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			makePhoneCall: function () {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			open(){
				let user_data=base.session.get('weixin_min_number');
				if(user_data)
				{
					if(user_data.info.is_auth!=2)
					{
						this.$refs.popup.open();
					}else{
						this.$refs.popup2.open();
					}
				}
			},
		    close() {
				 this.$refs.popup2.close()
		    },
			change(e) {
				let This = this;
				if(e.show==true)
				{
					base.request({
						url:base.urltext('/itorder/user_port/order_list'),
						header:{'authorization':app.g.session_key},
						success:function(res){
							if(res.data.success>0)
							{
								This.recordData = res.data.list;
								
							}
						}
					});
					
				}
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			modalTap: function (e) {
				base.request({
					url:base.urltext('/itorder/home_port/min_deal'),
					success:function(res){
						if(res.data.success>0)
						{
							uni.showModal({
								title: res.data.list.title,
								content: res.data.list.content,
								showCancel: false,
								confirmText: "我已了解",
								confirmColor: "#00215b"
							})
						}
					}
				});
			}
			
		}
	}
</script>

<style>
	/* .subsite-banner-top{ overflow: hidden;}
	.subsite-banner-top image{ width: 100%;}
	.form-group{ margin-bottom: 30rpx;}
	.field-label{font-weight: bold;}
	.col-6{ width: 48%;}
	.field-control{ margin-top: 20rpx;}
	textarea{height: 150upx; width: 95%;}
	.current{ background-color: #00215b; color: #FFFFFF; border-radius: 2em; font-size: 24rpx; padding: 6rpx 30rpx; }
	.price-item{ position: absolute; bottom: 0; font-size: 24rpx; color:#d6000f }
	.sou-but{ margin: 0 0 0 20rpx;}
	.authorize-box{border-radius:20rpx 20rpx 0 0; background-color: #FFFFFF; padding: 40rpx 30rpx;} */
	.subsite-banner-top{ overflow: hidden;}
	.subsite-banner-top image{ width: 100%;}
	.form-group{ margin-bottom: 30rpx;}
	.field-label{font-weight: bold;}
	.col-6{ width: 48%;}
	.field-control{ margin-top: 20rpx;}
	textarea{height: 150upx; width: 95%;}
	.current{ background-color: #00215b; color: #FFFFFF; border-radius: 2em; font-size: 24rpx; padding: 6rpx 30rpx; }
	.price-item{ position: absolute; bottom: 0; font-size: 24rpx; color:#d6000f }
	.sou-but{ margin: 0 0 0 20rpx;}
	.authorize-box{border-radius:20rpx 20rpx 0 0; background-color: #FFFFFF; padding: 40rpx 30rpx;}
	.mapclick{ padding:16rpx; margin-left: 10rpx;}
</style>
